<template>
  <div>
    <div class="hry-footer1" v-if="showInfo">
      <div class="footer-wrapper">
        <div>
          <h2>关注我们</h2>
          <img :src="$api.imgUserUrl + info.weixin_code" alt="" />
          <img :src="$api.imgUserUrl + info.weixin_code2" alt="" />
        </div>
        <div>
          <h2>联系我们</h2>
          <span>客服电话： {{ info.tel }}</span
          ><br />
          <span>客服邮箱： {{ info.kefuemail }}</span
          ><br />
          <span>工作时间： {{ info.wokertime }}</span
          ><br />
          <span>公司地址： {{ info.address }}</span>
        </div>
      </div>
    </div>
    <div class="hry-footer2">
      <div class="footer-wrapper">
        <div>
          <!--          <div>-->
          <!--            <span>友情链接: </span>-->
          <!--            <a href="">中国创业网</a>-->
          <!--            <a href="">中国创业网</a>-->
          <!--            <a href="">中国创业网</a>-->
          <!--            <a href="">中国创业网</a>-->
          <!--          </div>-->
          <!--          <br />-->
          <div class="icp">
            {{ info.copyright }}
          </div>
        </div>
        <div class="connection">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ info.sina }}</span>
            </template>
            <img
              src="@/assets/footerImg/weibo.png"
              alt=""
              style="margin-right: 20px"
            />
          </a-tooltip>
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ info.weixin }}</span>
            </template>
            <img src="@/assets/footerImg/wecharts.png" alt="" />
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hryfooter",
  props: {
    showInfo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      info: {}
    };
  },
  methods: {
    getFootInfo() {
      this.$ajax
        .post(this.$api.getFootInfo)
        .then(res => {
          this.info = res;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getFootInfo();
  }
};
</script>

<style scoped lang="less">
.hry-footer1 {
  background: #424242;
  .footer-wrapper {
    padding: 3rem 19rem 3rem 13rem;
    .flex_content ();
    .flex_justify_space();
    > div {
      text-align: left;
      font-size: 0;
      h2 {
        color: @white;
        font-size: 1.5rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
      }
      > img {
        width: 9rem;
        display: inline-block;
        margin-right: 4rem;
      }
      span {
        color: @white;
        font-size: 1rem;
        display: inline-block;
        margin-bottom: 1.65rem;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
.hry-footer2 {
  background: #2b2b2b;
  font-size: 0.88rem;
  .footer-wrapper {
    padding: 1.44rem 13rem;
    .flex_content ();
    .flex_justify_space();
    color: #cac8c8;
    letter-spacing: 0.23rem;
    .connection {
      align-self: flex-end;
    }
    div {
      text-align: left;
      .icp {
        margin-top: 10px;
      }
      div {
        display: inline-block;
        a {
          color: #cac8c8 !important;
          &:after {
            content: "|";
            margin: 0 7px;
          }
          &:last-child {
            &:after {
              content: "";
            }
          }
        }
      }
    }
  }
}
</style>
